<template>
	<view class="main" :style="{paddingBottom:((getSafeBottom==20? 0:getSafeBottom) + bottomBtnHeight)+'px'}">
		<companyMessage v-if="type=='1'" :id="id" ref="messageRef"></companyMessage>
		<seekerMessage v-else-if="type=='2'" :id="id" ref="messageRef"></seekerMessage>
		
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		messageDetailCompany,
		applyTel,
		successTel
	} from "@/core/web-api/session.js"
	import { mapGetters, mapState } from "vuex"
	import { getData } from "@/core/web-api/common.js"
	import Navbar from "@/components/Navbar.vue"
	import socket from "@/core/socket.js"
	import store from "@/core/store.js"
	import companyMessage from "@/pages/web/message/message-qiye.vue"
	import seekerMessage from "@/pages/web/message/message-qiuzhi.vue"
	export default {
		components: {
			Navbar,
			companyMessage,
			seekerMessage
		},
		data() {
			return {
				bottomBtnHeight: uni.upx2px(90),
				id:"",
				ksource:"",
				notReadNum:0
			}
		},
		methods: {
			
		},
		computed:{
			...mapState(['type']),
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom', 'getPageHeight']),
		},
		onLoad(options) {
			
			this.ksource=options.id?'message':'data';//message:从消息列表进入；data:从数据详情页进入
			this.id = options.id?options.id:options.dataid;
			this.$nextTick(()=>{
				this.$refs.messageRef.getInit(this.id,this.ksource);
			});
			 
		},
		onShow(){
			
		},
		onUnload() {
			this.$store.commit("setSessId","")
			console.log("离开消息界面：",store.state.sessId)
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
	}

	.top {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.content {
		width: 100%;
		position: relative;
		z-index: 99;
		padding: 30rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.headNav .blackBtn {
		position: absolute;
		left: 5rpx;
		top: 0;
	}

	.jobPostings {
		padding: 14rpx 28rpx 23rpx 14rpx;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		position: relative;
		margin-bottom: 33rpx;
	}

	.jobPostings .title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.jobPostings .h3 {
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 34rpx;
		color: #4E4D4D;
	}

	.jobPostings .span {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 29rpx;
		color: #1684FC;
		padding-top: 8rpx;
	}

	.jobPostings .p {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #7F8080;
		padding-left: 5rpx;
		margin-bottom: 19rpx;
	}

	.cardList {
		width: 100%;
	}

	.card {
		background: #D0E0FD;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		padding: 7rpx 12rpx 9rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 20rpx;
		color: #4E4D4D;
		margin-right: 23rpx;
	}

	.jobPostings .date {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 23rpx;
		color: #7F8080;
		position: absolute;
		bottom: 20rpx;
		right: 35rpx;
	}

	.prompt {
		width: 100%;
		text-align: center;
		margin-bottom: 20upx;
		margin-top: 20upx;
	}

	.prompt .span {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 23rpx;
		color: #7F8080;
		margin-left: 14rpx;
	}

	.messageList {
		width: 100%;
		padding: 0 39rpx 0 45rpx;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.messageHe,
	.messageMe {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.messageMe {
		justify-content: flex-end;
	}

	.avatar {
		width: 81rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 11rpx;
	}

	.messageText {
		max-width: 60%;
		padding: 13rpx 13rpx 14rpx 19rpx;
		box-sizing: border-box;
		margin-right: 12rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.messageText .p {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 23rpx;
		color: #666767;
	}

	.messageText .p:first-child {
		margin-bottom: 7rpx;
	}

	.isRead {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 20rpx;
		color: #7F8080;
	}

	.blue {
		color: #1684FC;
		margin-left: 15rpx;
	}

	.getInformationBtn {
		width: 100%;
		text-align: center;
		margin-top: 7rpx;
		margin-bottom: 7upx;
	}

	.getInformationBtn .yes,
	.getInformationBtn .no {
		width: 121rpx;
		height: 40rpx;
		line-height: 40rpx;
		display: inline-block;
		text-align: center;
		border-radius: 10rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 23rpx;
		color: #FFFFFF;
	}

	.getInformationBtn .yes {
		background: #96BCE4;
		margin-right: 15rpx;
	}

	.getInformationBtn .no {
		background: #B2B2B2;
	}

	.footerBox {
		width: 100%;
		background: #F5F5F5;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.messageTemplate {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
	}

	.listMT {
		width: 100%;
		background: #F9F9F9;
		box-shadow: 0rpx 12rpx 28rpx rgba(202, 206, 216, 0.35);
		border-radius: 10rpx;
		border: 1px solid #0180FF;
		padding: 35rpx 17rpx 35rpx 23rpx;
		box-sizing: border-box;
	}

	.listMT .ul {
		width: 100%;
		height: 260upx;
		overflow-y: auto;
		padding-right: 51rpx;
		box-sizing: border-box;
	}

	.listMT .ul::-webkit-scrollbar {
		width: 20rpx !important;
		background: #E4E5E6;
		border-radius: 10rpx;
	}

	.listMT .li {
		width: 100%;
		padding: 33rpx 24rpx 19rpx 19rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 22rpx;

	}

	.listMT .li .p {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		width: 70%;
		line-height: 45rpx;
		display: inline-block;
	}

	.listMT .li .send {
		width: 90rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: #F2F2F2;
		border-radius: 10rpx;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
	}

	.footerButton {
		width: 100%;
		overflow: hidden;
		background: #fff;
		height: 100upx;
		line-height: 100upx;
	}

	.collection {
		width: 20%;
		float: left;
		text-align: center;
	}

	.collection .span {
		width: 61rpx;
		height: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #666666;
		line-height: 39rpx;
		margin-left: 18rpx;
	}

	.call,
	.overCall {
		width: 50%;
		text-align: center;
		background: #1684FC;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		float: left;
	}

	.overCall {
		background: #CBDFEA;
	}
</style>